<template>
  <div class="history-page">
    <div class="page-header">
      <h1>聊天记录</h1>
      <p>查看和搜索历史聊天记录</p>
    </div>

    <div class="history-filters">
      <div class="filter-group">
        <label>时间范围:</label>
        <select v-model="selectedTimeRange">
          <option value="today">今天</option>
          <option value="week">本周</option>
          <option value="month">本月</option>
          <option value="all">全部</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>联系人:</label>
        <select v-model="selectedContact">
          <option value="">全部联系人</option>
          <option v-for="contact in contacts" :key="contact.id" :value="contact.id">
            {{ contact.name }}
          </option>
        </select>
      </div>
      
      <div class="search-group">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索消息内容..." 
          class="search-input"
        />
      </div>
    </div>

    <div class="history-list">
      <div 
        v-for="record in filteredHistory" 
        :key="record.id"
        class="history-item"
        @click="viewRecord(record)"
      >
        <div class="record-header">
          <div class="record-info">
            <div class="contact-avatar">
              <img :src="record.contact.avatar" :alt="record.contact.name" />
            </div>
            <div class="contact-details">
              <h3 class="contact-name">{{ record.contact.name }}</h3>
              <p class="record-date">{{ formatDate(record.date) }}</p>
            </div>
          </div>
          <div class="record-stats">
            <span class="message-count">{{ record.messageCount }} 条消息</span>
            <span class="duration">{{ record.duration }}</span>
          </div>
        </div>
        
        <div class="record-preview">
          <p class="last-message">{{ record.lastMessage }}</p>
        </div>
        
        <div class="record-tags" v-if="record.tags.length > 0">
          <span 
            v-for="tag in record.tags" 
            :key="tag"
            class="tag"
          >
            {{ tag }}
          </span>
        </div>
      </div>
    </div>

    <div v-if="filteredHistory.length === 0" class="empty-state">
      <div class="empty-icon">📋</div>
      <h3>没有找到聊天记录</h3>
      <p>尝试调整筛选条件或搜索关键词</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedTimeRange = ref('all')
const selectedContact = ref('')
const searchQuery = ref('')

// 模拟联系人数据
const contacts = ref([
  { id: '1', name: '张三', avatar: '/default-avatar.png' },
  { id: '2', name: '李四', avatar: '/default-avatar.png' },
  { id: '3', name: '王五', avatar: '/default-avatar.png' }
])

// 模拟历史记录数据
const historyRecords = ref([
  {
    id: '1',
    contact: { id: '1', name: '张三', avatar: '/default-avatar.png' },
    date: new Date('2024-01-15'),
    messageCount: 25,
    duration: '45分钟',
    lastMessage: '好的，我明白了。谢谢您的解答！',
    tags: ['技术支持', '已解决']
  },
  {
    id: '2',
    contact: { id: '2', name: '李四', avatar: '/default-avatar.png' },
    date: new Date('2024-01-14'),
    messageCount: 12,
    duration: '20分钟',
    lastMessage: '产品很不错，我会推荐给朋友的。',
    tags: ['产品咨询']
  },
  {
    id: '3',
    contact: { id: '3', name: '王五', avatar: '/default-avatar.png' },
    date: new Date('2024-01-13'),
    messageCount: 8,
    duration: '15分钟',
    lastMessage: '订单已经处理，请注意查收。',
    tags: ['订单处理', '已完成']
  }
])

const filteredHistory = computed(() => {
  let filtered = historyRecords.value

  // 按联系人筛选
  if (selectedContact.value) {
    filtered = filtered.filter(record => record.contact.id === selectedContact.value)
  }

  // 按时间范围筛选
  if (selectedTimeRange.value !== 'all') {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    
    filtered = filtered.filter(record => {
      switch (selectedTimeRange.value) {
        case 'today':
          return record.date >= today
        case 'week':
          const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
          return record.date >= weekAgo
        case 'month':
          const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
          return record.date >= monthAgo
        default:
          return true
      }
    })
  }

  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(record =>
      record.contact.name.toLowerCase().includes(query) ||
      record.lastMessage.toLowerCase().includes(query) ||
      record.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }

  return filtered.sort((a, b) => b.date.getTime() - a.date.getTime())
})

const formatDate = (date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  
  return date.toLocaleDateString('zh-CN')
}

const viewRecord = (record) => {
  console.log('查看记录:', record)
  // 这里可以跳转到详细页面或打开模态框
}
</script>

<style scoped>
.history-page {
  padding: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.page-header h1 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.page-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.history-filters {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.filter-group,
.search-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.filter-group select,
.search-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.search-group {
  flex: 1;
  min-width: 200px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.history-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.record-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.record-date {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.record-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
}

.message-count,
.duration {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.record-preview {
  margin-bottom: var(--spacing-md);
}

.last-message {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.5;
}

.record-tags {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary-alpha);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-medium);
}

.empty-state {
  text-align: center;
  padding: var(--spacing-3xl, 4rem) var(--spacing-xl);
  color: var(--color-text-secondary);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.empty-state h3 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

.empty-state p {
  font-size: var(--font-size-base);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .history-page {
    padding: var(--spacing-lg);
  }
  
  .history-filters {
    flex-direction: column;
  }
  
  .record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .record-stats {
    align-items: flex-start;
  }
}
</style>